<!DOCTYPE html>
<html>
<head>
    <title>在网页中展示 PDF 文件</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.269/pdf.min.mjs" type="module"></script>
</head>
<body>
    <canvas id="pdfViewer"></canvas>
    <script type="module">
          var { pdfjsLib } = globalThis;
            // The workerSrc property shall be specified.
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.269/pdf.worker.mjs';
        pdfjsLib.getDocument('https://yunyuehuang.gitee.io/frontend_project/zp/yasuo.pdf').promise.then(function (pdf) {
            pdf.getPage(1).then(function (page) {
                var scale = 1.5;
                var viewport = page.getViewport({ scale: scale });

                var canvas = document.getElementById('pdfViewer');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        });
    </script>
</body>
</html>